﻿@using System.Web.Script.Serialization;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Tracking Software</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("Tracking Software", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Map", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - Tracking Software</p>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
        
    </body>
</html>


 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAfDaW3n3XGw_pp_dRRm9yYHwWXQGR0rhI&sensor=false"></script>
 <script type="text/javascript">  
   $(document).ready(function () {  
     initialize();  
   });

   var map;
   var markersArray = [];
   var linesArray = [];


   function initialize() {
       $.getJSON('api/Cars').done(function (data) {
           initializeSelectCar(data);
           initializeMap(data);
           setInterval(timer, 2000);
       });
       
       var selectCar = document.getElementById("SelectCar");
       selectCar.onchange = selectCarOnChange;
   }

   function timer() {
       var selectCar = document.getElementById("SelectCar");
       var id = selectCar.value;

       if (id == -1) {
           $.getJSON('api/Cars').done(function (data) {
               setAllCars(data);
           });

       }
       else {
           $.getJSON('api/CarStates/' + id).done(function (data) {
               setCarStates(data);
           });
       }

   }

   function selectCarOnChange() {
       var selectCar = document.getElementById("SelectCar");
       var id = selectCar.value;
       var carInfo = document.getElementById("CarInfo");

       if (id == -1) {
           $.getJSON('api/Cars').done(function (data) {
               setAllCars(data);
           });
           carInfo.innerHTML = '';
           
       }
       else {
           $.getJSON('api/CarStates/' + id).done(function (data) {
               setCarStates(data);
           });

           $.getJSON('api/Cars/' + id).done(function (data) {
               carInfo.innerHTML = '<h1>Car info</h1>' +
                   '<p>Name: ' + data.name + '</p>' +
                   '<p>Driver: ' + data.driver + '</p>' +
                   '<p>Phone Number: ' + data.phoneNumber + '</p>' +
                   '<p>Email: ' + data.email + '</p>';
           });
       }
   }

   function initializeMap(data) {
       
       var mapOptions = {  
           center: new google.maps.LatLng(0, 0),  
           zoom: 10,  
           mapTypeId: google.maps.MapTypeId.ROADMAP  
       };  
       map = new google.maps.Map(document.getElementById("map_canvas"),  
         mapOptions);

       setAllCars(data);
   }

   function clearMap() {
       for (k = 0; k < markersArray.length; k++)
           markersArray[k].setMap(null);
       markersArray.length = 0;

       for (k = 0; k < linesArray.length; k++)
           linesArray[k].setMap(null);
       linesArray.length = 0;
   }

   function setAllCars(data) {
       clearMap();
       
       for (i = 0; i < data.length; i++) {
           var lineSymbol = {
               path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
           };



           var lineCoordinates = [
             new google.maps.LatLng(data[i].x, data[i].y),
             new google.maps.LatLng(data[i].x + 0.000001 * data[i].directionSin, data[i].y + 0.000001 * data[i].directionCos)
           ];

           var line = new google.maps.Polyline({
               path: lineCoordinates,
               icons: [{
                   icon: lineSymbol,
                   offset: '100%'
               }],
               map: map
           });
           linesArray.push(line);


           var latlng = new google.maps.LatLng(data[i].x, data[i].y);
           var marker = new google.maps.Marker({
               position: latlng,
               map: map,
               title: data[i].name
           });
           markersArray.push(marker);

           var message = '<h1 id="firstHeading" class="firstHeading">' + data[i].name + '</h1>' +
                   '<p>Speed: ' + data[i].speed + '</p>' +
                   '<p>Oil pressure: ' + data[i].oilPressure + '</p>' +
                   '<p>Gas Pressure: ' + data[i].gasPressure + '</p>' +
                   '<p>Driver: ' + data[i].driverName + ' ' + data[i].driverSurname + '</p>' +
                   '<p>Time: ' + data[i].time + '</p>';

           addInfoWindow(marker, message);


       }
   }

   function setCarStates(data) {
       clearMap();

       for (i = 0; i < data.length; i++) {
           var lineSymbol = {
               path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
           };



           var lineCoordinates = [
             new google.maps.LatLng(data[i].x, data[i].y),
             new google.maps.LatLng(data[i].x + 0.000001 * data[i].directionSin, data[i].y + 0.000001 * data[i].directionCos)
           ];

           var line = new google.maps.Polyline({
               path: lineCoordinates,
               icons: [{
                   icon: lineSymbol,
                   offset: '100%'
               }],
               map: map
           });
           linesArray.push(line);


           var latlng = new google.maps.LatLng(data[i].x, data[i].y);
           var marker = new google.maps.Marker({
               position: latlng,
               map: map,
               title: 'Time: ' + data[i].time
           });
           markersArray.push(marker);

           var message = '<p>Speed: ' + data[i].speed + '</p>' +
                   '<p>Oil pressure: ' + data[i].oilPressure + '</p>' +
                   '<p>Gas Pressure: ' + data[i].gasPressure + '</p>' +
                   '<p>Time: ' + data[i].time + '</p>';

           addInfoWindow(marker, message);

           if (i != 0) {
               lineCoordinates = [
                   new google.maps.LatLng(data[i - 1].x, data[i - 1].y),
                   new google.maps.LatLng(data[i].x, data[i].y)
               ];
               line = new google.maps.Polyline({
                   path: lineCoordinates,
                   map: map
               });
               linesArray.push(line);
           }
       }
   }



   function addInfoWindow(marker, message) {
       var info = message;

       var infoWindow = new google.maps.InfoWindow({
           content: message
       });

       google.maps.event.addListener(marker, 'click', function () {
           infoWindow.open(map, marker);
       });
   }

   function initializeSelectCar(data) {

       var select = document.getElementById("SelectCar");
       
       var opt = document.createElement('option');
       opt.value = -1;
       opt.innerHTML = 'All cars';
       select.appendChild(opt);
       

       for (i = 0; i < data.length; i++) {
           var opt = document.createElement('option');
           opt.value = data[i].id;
           opt.innerHTML = data[i].name;

           select.appendChild(opt);
       }
       select.value = -1;
   }


 </script>  

